<template>
  <div>
    <el-form
      ref="portForm"
      :model="portForm"
      :rules="rules"
      label-width="120px"
      class="flex-form"
      size="small"
      v-if="dialogType != 'detail'"
    >
      <el-form-item label="关区名称" prop="customsCode" style="width: 40%">
        <el-select
          v-model="portForm.customsCode"
          placeholder="请选择关区"
          filterable
          clearable
        >
          <el-option
            v-for="item in customsList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="口岸列表" prop="portCode" style="width: 50%">
        <el-select
          v-model="portForm.portCode"
          multiple
          placeholder="请选择批准行驶口岸"
          class="fieldMsgList"
          filterable
          clearable
        >
          <el-option
            v-for="item in portInfoList"
            :key="item.portCode"
            :label="item.portCode + '-' + item.portCnName"
            :value="item.portCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label-width="20px"
        style="width: 10%"
      >
        <el-button
          type="success"
          icon="el-icon-plus"
          size="mini"
          @click="handleAddField"
        >添加
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      :data="tableData"
      stripe
      border
      size="small"
    >
      <!-- <el-table-column type="selection" width="55" align="center" /> -->
      <el-table-column
        label="关区名称"
        align="center"
        prop="customsCode"
        show-tooltip-when-overflow
        width="300px"
      >
        <template slot-scope="scope">
          <span>{{
              getDictLabel(scope.row.customsCode, customsList, "name", "value")
            }}</span>
        </template>
      </el-table-column>
      <el-table-column label="口岸列表" align="center" prop="fieldMsgList">
        <template slot-scope="scope">
          <el-tag
            size="mini"
            v-for="(item, index) in scope.row.portCode"
            :key="index"
            style="margin: 3px"
          >{{ getDictLabel(item, portInfoList, "portCnName", "portCode") }}
          </el-tag
          >
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
        width="80"
        fixed="right"
        v-if="dialogType != 'detail'"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDeleteField(scope.$index, scope.row)"
            style="color: red"
          >移除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import {findPortList} from "@/api/swdecl/swRoadVeRecord"

export default {
  name: "allowlePortList",
  props: {
    dialogType: {
      type: String,
      default: "add",
    },
    customsList: {
      type: Array,
      default: () => []
    },
    allowPortListData: {
      type: Array,
      default: () => []
    },
  },
  data() {
    return {
      tableData: [],
      portInfoList: [],
      portForm: {
        customsCode: "",
        portCode: []
      },
      rules: {
        customsCode: [
          {
            required: true,
            message: "关区不能为空",
            trigger: "blur",
          },
        ],
        portCode: [
          {
            required: true,
            message: "口岸列表不能为空",
            trigger: "blur",
          },
        ],
      }
    }
  },
  watch: {
    allowPortListData: {
      immediate: true,
      handler(val) {
        this.tableData = val.map(item => {
          return {
            ...item,
            portCode: item.portCode.split(",")
          }
        });
      }
    }
  },
  created() {
    this.getPortList();
  },
  methods: {
    getPortList() {
      findPortList().then(res => {
        this.portInfoList = res.data
      })
    },
    handleAddField() {
      this.$refs["portForm"].validate((valid) => {
        if (valid) {
          this.tableData.push({...this.portForm});
          this.$emit("selectAllowPort", this.tableData);
          this.$refs.portForm.resetFields();
        }
      });
    },
    handleDeleteField(index) {
      this.tableData.splice(index, 1);
      this.$emit("selectAllowPort", this.tableData);
    },
    getDictLabel(val, list, label, value) {
      let res = list.filter((item) => item[value] === val);
      if (res.length > 0)
        return res.length > 0 ? (val + "-" + res[0][label]) : val;
    },
  }
};
</script>

<style>
</style>
